<template>
    <section>
      <h2>账号密码登录</h2>
      <div class="safe-tip">为了你的账号安全，请用手机号登录</div>
      <div class="phone">
        <div>中国 +86</div>
        <input type="text" placeholder="请输入手机号" v-model.number="phone" />
      </div>
      <div class="password"><input type="password" placeholder="请输入密码"  v-model="password"/></div>
      <button @click="getMessage">登录</button>
      <div class="checktype">
        <span>验证码登录</span>
        <div><span>忘记密码</span><span>|</span><span>免费注册</span></div>
      </div>
      <div class="footer">
        <van-checkbox
          v-model="checked"
          checked-color="#1ba784"
          icon-size="24px"
        style="margin-right:5px"
        ></van-checkbox
        >阅读并同意<span>《用户协议》</span> 和<span>《隐私政策》</span>
      </div>
    </section>
</template>
<script lang="ts" setup>
import Vue from 'vue'
import {ref} from "vue"
import request from "../../utils/request"
import router from '../router';
const phone:any=ref()
const password:any =ref()
const checked=ref()
function getMessage(){
    request({
        url:"/user/m/login",
        method:"post",
        data:{mobile:phone.value,deviceId:"16643309625809817195",deviceName:"PC",pwd:password.value}
    }).then((res:any)=>{
        console.log(password)
        console.log(res)
        if(res.code===0){
            alert("登陆成功")
            router.push("/")
        }else{
            alert(res.msg)
        }
    })
}
</script>
<style scoped>
html {
  font-size: 100px;
}
section {
  width: 375px;
  height: 100vh;
  padding: 40px 30px 0;
  box-sizing: border-box;
}
h2 {
  width: 100%;
  font-size: 24px;
}
.safe-tip {
  width: 100%;
  margin-top: 20px;
  font-size:14px;
  color: #969799;
}
.phone {
  width: 100%;
  height: 54px;
  padding: 20px 0 10px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  box-sizing: border-box;
}
.phone div {
  width: 72px;
  height: 19px;
  padding-right: 2.67vw;
  margin-right: 2.67vw;
  color: #323233;
  font-size:14px;
  line-height: 19px;
  border-right: 1px solid #ebedf0;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.phone input {
  width: 100%;
  border: none;
  margin-top: -2.5px;
  height: 24px;
  font-size: 3.73vw;
}
::-webkit-input-placeholder {
  font-size: 3.73vw;
  color: #cdd0d0;
}
.password {
  width: 100%;
  height: 54px;
  padding: 20px 0 10px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  box-sizing: border-box;
}
.password input {
  width: 100%;
  height: 24px;
  border: none;
  font-size: 3.73vw;
}
button {
  width: 100%;
  height: 44px;
  background-color: #1ba784;
  color: #fff;
  font-size: 4.27vw;
  margin-top: 8vw;
  border: none;
  border-radius: 5px;
}
.checktype {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}
.checktype span {
  color: #38f;
  font-size: 3.2vw;
}
.checktype div {
  display: flex;
  justify-content: space-between;
  width: 109px;
}
.checktype div span:nth-child(2) {
  line-height:16px;
  color: #ebedf0;
}
.footer {
  width: 100%;
  height: 16px;
  font-size: 3.2vw;
  color: #969799;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer span{color: #38f;}
</style>